<!DOCTYPE html>
<html>
  <head>
    <title>Freie Computer</title>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- css -->
    <link rel="shortcut icon" href="./favicon.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet" media="screen">
    <link href="color/default.css" rel="stylesheet" media="screen">
    <!-- js -->
    <script src="js/modernizr.custom.js"></script>
  </head>
  <body>
	<div class="menu-area">
			<div id="dl-menu" class="dl-menuwrapper">
						<button class="dl-trigger">Men&uuml; &ouml;ffnen</button>
						<ul class="dl-menu">
							<li>
								<a href="#intro">Home</a>
							</li>
							<li><a href="#about">Befreite Hardware</a></li>
							<li><a href="#shop">Shop</a></li>
							<li><a href="#contact">Kontakt</a></li>
						</ul>
					</div><!-- /dl-menuwrapper -->
	</div>	

	  <!-- intro area -->	  
	  <div id="intro">
	  
			<div class="intro-text">
				<div class="container">
					<div class="row">
					
						
					<div class="col-md-12">
			
						<div class="brand">
                                                        <h1><a href="index.html">Freie Computer</a></h1>
                                                        <div class="line-spacer"></div>
                                                        <p><span>F&uuml;r Freie Menschen</span></p>
                                                        </div>
						</div>
					</div>
					</div>
				</div>
		 	</div>
			
	 </div>
	  

	  
	  
	  <!-- About -->
	  <section id="about" class="home-section bg-white">
		<div class="container">
			  <div class="row">
				  <div class="col-md-offset-2 col-md-8">
					<div class="section-intro">
					 <h2>Befreite Hardware</h2>
					 <p>Heute ist es m&ouml;glich ein Freies Betriebssystem wie GNU/Linux auf den meisten Laptops zu nutzen.
                                         Oftmals werden daf&uuml;r allerdings unfreie Treiber, beispielsweise f&uuml;r den Betrieb des WLan-Moduls, ben&ouml;tigt.
                                         Auch das BIOS, der Kern eines jeden PCs, ist in den seltensten F&auml;llen frei zug&auml;nglich und kann weder analysiert
                                         noch ver&auml;ndert werden.</p>

                                         <p>Die <a href="https://wiki.fsfe.org/groups/Zurich" target="_blank">Lokalgruppe Z&uuml;rich</a> der <a href="https://fsfe.org" target="_blank">FSFE</a> r&uuml;stet
					 gebrauchte Laptops auf, so dass sie ohne propriet&auml;re Treiber funktionieren und mit einer Freien <a href="https://www.gnu.org/distros/free-distros.html" target="_blank">
                                         GNU/Linux Distribution</a> betrieben werden k&ouml;nnen. Es wird ausserdem das Freie BIOS <a href="http://libreboot.org" target="_blank">Libreboot</a> eingespielt.</p>
                                         
                                         <p>Wir bieten dir einen befreiten Laptop zu einem fairen Preis an. Das ist nur m&ouml;glich, da wir nicht gewinnwirtschaftlich
                                         orientiert sind. Die Einnahmen investieren wir wieder in die Anschaffung weiterer Ger&auml;te zur Aufarbeitung.
                                         Ziel ist es, m&ouml;glichst vielen interessierten Menschen einen Zugang zu einem Freien Computer zu erm&ouml;glichen.
                                         Durch die Weiterverwendung von gebrauchten Ger&auml;ten wird ausserdem eine nachhaltige Nutzung gew&auml;hrleistet.</p>

                                        <p>Sollte ein bei uns erworbener Laptop irgendwann kaputt gehen, k&ouml;nnen wir versuchen ihn wieder zu reparieren. Falls dies nicht
                                        m&ouml;glich sein sollte, k&ouml;nnen wir das defekte Ger&auml;t fachgerecht f&uuml;r dich entsorgen.</p>

                                         <p>Hast Du Interesse an einem Freien Computer, dann nutze bitte zur Kontaktaufnahme das Formular. Im folgenden findest du eine
                                         Auflistung der Ger&auml;te die zur Zeit verf&uuml;gbar sind. Schreib uns einfach, für welches Ger&auml;t Du dich interessierst.
                                         Du kannst es dann wahlweise in Z&uuml;rich abholen oder dir zuschicken lassen. Bedenke bitte, dass bei einem Versand zus&auml;tzliche
                                         Kosten entstehen. Es ist grunds&auml;tzlich auch m&ouml;glich Ger&auml;te nach &Ouml;sterreich oder Deutschland zu verschicken.
                                         </p>
					</div>
				  </div>
			  </div>
			  <div class="row">
		  </div>	  
	  </section>
	  

	<!-- Shop -->
	<section id="shop" class="home-section bg-white">
			<div class="container">
			  <div class="row">
				  <div class="col-md-offset-2 col-md-8">
					<div class="section-heading">
					 <h2>Shop</h2>
					 <p>Zur Zeit haben wir folgende Geräte im Angebot:</p>
					</div>
				  </div>
			  </div>
				<div class="row">
					<div class="col-md-offset-2 col-md-8">
					
					<ul class="lb-album">
						<li>
							<a href="#image-1">
								<img src="img/shop/thumbs/t60_small.jpg" alt="T60">
								<span>T60 </span>
							</a>
							<div class="lb-overlay" id="image-1">
								<a href="#page" class="lb-close">X</a>
								<img src="img/shop/t60.jpg" alt="" />
								<div>
									<h3>T60<span>CHF 150</h3>
									<p>1.83GHz Core Duo</br>14" 1400×1050px</br>2GB RAM</br>320GB HDD</p>
								</div>
								
							</div>
						</li>
						<li>
							<a href="#image-2">
								<img src="img/shop/thumbs/x200_1_small.jpg" alt="">
								<span>X200</span>
							</a>
							<div class="lb-overlay" id="image-2">
								<a href="#page" class="lb-close">x Close</a>
								<img src="img/shop/x200_1.jpg" alt="X200" />
								<div>
									<h3>X200<span>CHF 200</h3>
									<p>2.6GHz Core 2 Duo</br>12.1" 1280x800px</br>2GB RAM</br>320GB HDD</p>
								</div>
								
							</div>
						</li>
						<li>
							<a href="#image-3">
								<img src="img/shop/thumbs/t400_small.jpg" alt="T400">
								<span>T400</span>
							</a>
							<div class="lb-overlay" id="image-3">
								<a href="#page" class="lb-close">x Close</a>
								<img src="img/shop/t400.jpg" alt="" />
								<div>
									<h3>T400<span>CHF 200</h3>
									<p>2.4GHz Core 2 Duo</br>14.1" 1440x900px</br>4GB RAM</br>320GB HDD</p>
								</div>
								
							</div>
						</li>
						<li>
							<a href="#image-4">
								<img src="img/shop/thumbs/x200_2_small.jpg" alt="X200">
								<span>X200</span>
							</a>
							<div class="lb-overlay" id="image-4">
								<a href="#page" class="lb-close">x Close</a>
								<img src="img/shop/x200_2.jpg" alt="" />
								<div>
									<h3>X200<span>CHF 250</h3>
									<p>2.6GHz Core 2 Duo</br>12.1" 1280x800px</br>4GB RAM</br>320GB HDD</p>
								</div>
								
							</div>
						</li>
						
					</ul>
					</div>
				</div>
						F&uuml;r Details bitte auf das Bild klicken.	
			</div>
		</section>	  


                <!-- spacer -->
                <section id="spacer5" class="home-section spacer">
                </section>

 
	 <!-- Contact -->
	  <section id="contact" class="home-section bg-white">
	  	<div class="container">
			  <div class="row">
				  <div class="col-md-offset-2 col-md-8">
					<div class="section-heading">
					 <h2>Kontakt</h2>
                                         <p>Bitte nutze das Kontaktformular, und wir werden uns baldm&ouml;glichst
                                         bei Dir melden.</p>
					</div>
				  </div>
			  </div>

	  		<div class="row">
				<div class="col-md-offset-3 col-md-6">

	   <!-- Form itself -->

<div id="contacts">
     <!-- Alignment -->
	   <!-- Form itself -->
          <form name="sentMessage" class="form-horizontal" id="contactForm"  novalidate>
		 <div class="control-group">
                    <div class="controls">
			<input type="text" class="form-control" 
			   	   placeholder="Vorname Nachname" id="name" required
			           data-validation-required-message="Gib bitte Deinen Namen an" />
			  <p class="help-block"></p>
		   </div>
	         </div> 	
                <div class="control-group">
                  <div class="controls">
			<input type="email" class="form-control" placeholder="Email" 
			   	            id="email" required
			   		   data-validation-required-message="Bitte gib Deine Email-Adresse an" />
		</div>
	    </div> 	
			  
               <div class="control-group">
                 <div class="controls">
				 <textarea rows="10" cols="100" class="form-control" 
                       placeholder="Schreib uns f&uuml;r welches Ger&auml;t du dich interessierst" id="message" required
		       data-validation-required-message="Bitte gib eine Nachricht ein" minlength="5" 
                       data-validation-minlength-message="Mindestens 5 Zeichen" 
                        maxlength="5000" style="resize:none"></textarea>
		</div>
               </div> 		 
	     <div id="success"> </div> <!-- For success/fail messages -->
           <button type="submit" class="btn btn-theme btn-lg btn-block">Senden</button><br />	  
          </form>
</div>
		

	
				
	  		</div>
	  		</div>

	  	</div>
	  </section>  

	<footer>
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<p>Copyleft <a href="https://www.gnu.org/copyleft/fdl.html" target="_blank">GFDL</a> - Freedom granted.</p>
				</div>
			</div>		
		</div>	
	</footer>
	 
	<!-- js -->
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.smooth-scroll.min.js"></script>
	<script src="js/jquery.dlmenu.js"></script>
	<script src="js/wow.min.js"></script>
	<script src="js/custom.js"></script>
	<script src="./js/jqBootstrapValidation.js"></script>
	<script src="./js/contact_me.js"></script>
  </body>	
</html>
